<template>
    <view class="pagesSeats">
        <x-seats ref="xSeats" :seatData="viewModel" @confirm="seatsChange"></x-seats>
        <x-fixed>
            <view class="fixed">
                <view class="top-box">
                    <view class="top-box-name">{{ movieModel.filmName }}</view>
                    <view class="top-box-tips">{{ getDateTime }}</view>
                    <view class="top-box-uls">
                        <view class="top-box-lis" v-for="(item, index) in seatsList" :key="index">
                            <view class="top-box-lis-name">{{ item.Name }}</view>
                            <view class="top-box-lis-price">{{ fomatFloat(item.showPrice) }}</view>
                            <image @click="closeClick(item, index)" class="top-box-close" src="/sub_pages/movie/static/image/icon/icon_17.png" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
                <view class="swith">
                    <view class="swith-left">
                        <image class="swith-icon" src="/sub_pages/movie/static/image/icon/icon_40.png" mode="aspectFill" />
                        <view class="swith-main">
                            <view class="swith-tips">若系统座位出票不成功</view>
                            <view class="swith-tips">同意商家为您调整到附近最佳座位</view>
                        </view>
                    </view>
                    <view class="swith-right">
                        <u-switch :size="20" activeColor="#ff8e0c" @change="switchChange" inactiveColor="#dcd9d9" v-model="isSeatValue" :space="2"></u-switch>
                    </view>
                </view>
                <view class="bottom">
                    <view class="bottom-btn">
                        <u-button shape="circle" color="linear-gradient(90deg, #FF8600 0%, #F1BE6E 100%)" @click="payClick">
                            <!-- 请先选座 -->
                            <view v-if="isCheckEmpty(seatsList)">请先选座</view>
                            <view v-else>
                                <view class="bottom-confirm">{{ showPriceTotalPrice }}</view>
                                <view class="bottom-dedution">￥{{ settlementPriceTotalPrice }} 确认选座</view>
                            </view>
                        </u-button>
                    </view>
                </view>
            </view>
        </x-fixed>

        <u-modal :show="modal_show" title="请确定购票信息" showCancelButton closeOnClickOverlay confirmColor="#FF8600" @cancel="modalClose" @close="modalClose" @confirm="modalConfirm">
            <view class="">
                <view class="modal-item">
                    <text class="modal-item-title">影院：</text>
					{{ movieModel.cinemaName }}
                </view>
                <view class="modal-item">
                    <text class="modal-item-title">影片：</text>
					{{ movieModel.fileName }}
                </view>
                <view class="modal-item">
                    <text class="modal-item-title">时间：</text>
					{{ getDateTime }}
                </view>
                <!-- <view>座位：{{ get_seatsList_text }}</view> -->
            </view>
        </u-modal>

        <x-loading :show="isCheckEmpty(widgetModel)"></x-loading>
    </view>
</template>

<script>
import { getSeats } from '@/sub_pages/movie/common/api/movie.js';

import service from './service.js';

import xLoading from '@/sub_pages/movie/components/x-loading/x-loading.vue';
import xSeats from '@/sub_pages/movie/components/x-seats/x-seats.vue';
import xFixed from '@/sub_pages/movie/components/x-fixed/x-fixed.vue';

export default {
    components: { xLoading, xSeats, xFixed },
    data() {
        return {
            isSeatValue: false, // 是否自动换座
            options: {}, //
            viewModel: [], // 座位列表
            widgetModel: {}, // 存储基础信息
            seatsList: [], // 选中座位信息
            movieModel: {},

            modal_show: false,
        };
    },
    onLoad(e) {
        this.options = e;
        this.init();
        this.initMovieDetail();
    },
    computed: {
        getDateTime() {
            return service.getDateTime(this);
        },
		showPriceTotalPrice() {
		    // showPrice 官方价格（市场价）
		    const showPriceList = this.seatsList.map(item => Number(item.showPrice));
		    const num = showPriceList.reduce((a, b) => a + b, 0);
		    return this.fomatFloat(num, 2);
		},
		salePriceTotalPrice() {
		    // salePrice 销售价格
		    const salePriceList = this.seatsList.map(item => Number(item.salePrice));
		    const num = salePriceList.reduce((a, b) => a + b, 0);
		    return this.fomatFloat(num, 2);
		},
        settlementPriceTotalPrice() {
            // settlementPrice 结算价格（默认特惠购票的价格）
            const settlementPriceList = this.seatsList.map(item => Number(item.settlementPrice));
            const num = settlementPriceList.reduce((a, b) => a + b, 0);
            return this.fomatFloat(num, 2);
        },
        settlementQuickPriceTotalPrice() {
            // settlementQuickPrice 座位快捷出票结算价格
            const settlementQuickPriceList = this.seatsList.map(item => Number(item.settlementQuickPrice));
            const num = settlementQuickPriceList.reduce((a, b) => a + b, 0);
            return this.fomatFloat(num, 2);
        }
    },
    methods: {
        init() {
            this.isSeatValue = getApp().globalData.subcontracting_movie.isAutoSeat;
            this.getSeats();
        },
		fomatFloat(num) {
			var result = parseFloat(num);
			result = Math.round(num * 100) / 100;
			var s_x = result.toString(); //将数字转换为字符串
			var pos_decimal = s_x.indexOf('.'); //小数点的索引值			
			// 当整数时，pos_decimal=-1 自动补0
			if (pos_decimal < 0) {
			    pos_decimal = s_x.length;
			    s_x += '.';
			}
			// 当数字的长度< 小数点索引+2时，补0
			while (s_x.length <= pos_decimal + 2) {
			    s_x += '0';
			}
			return s_x;
		},
        // 初始化选票
        initMovieDetail() {
            let e = getApp().globalData.subcontracting_movie.beforeSeats || null;
            if (e) {
                this.movieModel = e;
            } else {
                getApp().globalData.subcontracting_movie.$utils.showToast('请选择购票场次');
                uni.$u.sleep(500).then(() => {
                    uni.navigateBack();
                });
            }
        },
        async getSeats() {
            getSeats(this.options)
                .then(res => {
                    const resData = res.data;
                    const data = resData?.seats || {};

                    Object.keys(data).forEach(e => {
                        this.viewModel.push(data[e]);
                    });
                    this.widgetModel = res;
                })
                .catch(err => {
                    uni.$u.sleep(500).then(() => {
                        uni.navigateBack();
                    });
                });
        },
        closeClick(e, i) {
            this.seatsList = this.seatsList.filter(item => item.SeatCode !== e.SeatCode);
            this.$refs.xSeats.handleChooseSeat(e.rowIndex, e.colIndex);
        },
        seatsChange(e) {
            this.seatsList = e;
        },
        switchChange(e) {
            getApp().globalData.subcontracting_movie.isAutoSeat = e;
        },

        isCheckEmpty(obj) {
            return getApp().globalData.subcontracting_movie?.$utils?.isCheckEmpty?.(obj);
        },
        payClick() {
            if (this.isCheckEmpty(this.seatsList)) {
                return uni.showToast({ title: '请选择座位', icon: 'none' });
            }

            this.modal_show = true;
        },
        modalClose() {
            this.modal_show = false;
        },
        // 用户确认影票信息
        modalConfirm() {
            getApp().globalData.subcontracting_movie.selectSeat = service.setSeatsList(this);

            Object.assign(getApp().globalData.subcontracting_movie.beforeSeats, {
				showPriceTotalPrice: this.showPriceTotalPrice, // 市场价格 总价
				salePriceTotalPrice: this.salePriceTotalPrice, // 销售价格 总价
                settlementPriceTotalPrice: this.settlementPriceTotalPrice, // 座位特惠购票结算价格 总价
                settlementQuickPriceTotalPrice: this.settlementQuickPriceTotalPrice, // 座位快捷出票结算价格 总价
            });
            uni.navigateTo({
                url: '/sub_pages/movie/check/check?dedPrice=' + this.settlementPriceTotalPrice,
            });

            this.modalClose();
        },
    },
};
</script>

<style lang="scss">
.pagesSeats {
    /deep/.x-fixed__bottom {
        border-radius: 28rpx 28rpx 0px 0px;
        box-shadow: none !important;
    }
}
</style>

<style lang="scss" scoped>
.pagesSeats {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;
    .fixed {
        background-color: #fff;
        opacity: 1;
        padding: 30rpx;
    }
    .top-box {
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #e5e5e5;
        &-name {
            @include font(32rpx, #333333, bold);
        }
        &-tips {
            @include font(26rpx, #666);
        }
        &-uls {
            display: flex;
            padding-top: 20rpx;
        }
        &-lis {
            width: 150rpx;
            height: 97rpx;
            background: #f7f7f7;
            border-radius: 7rpx;
            position: relative;
            @include flexCenterCenter;
            margin: 0 10rpx;
            flex-direction: column;
            &-name {
                @include font(26rpx, #666);
            }
            &-price {
                @include font(24rpx, #ff8600);
            }
        }
        &-close {
            position: absolute;
            top: 0;
            right: 0;
            padding: 4rpx;
            width: 22rpx;
            height: 22rpx;
        }
    }
    .swith {
        margin-top: 30rpx;
        width: 100%;
        @include flexCenter;
        &-left {
            display: flex;
            margin-right: 20rpx;
            flex: 1;
        }
        &-icon {
            width: 25rpx;
            height: 23rpx;
            padding-top: 10rpx;
        }
        &-main {
            margin-left: 10rpx;
            flex: 1;
        }
        &-tips {
            @include font(28rpx, #666666);
        }
    }
    .bottom {
        margin-top: 30rpx;
        &-btn {
            margin: 0 auto;
            width: 630rpx;
            height: 84rpx;
            background: linear-gradient(90deg, #ff8600 0%, #f1be6e 100%);
            border-radius: 50px;
            opacity: 1;
            @include font(30rpx, #ffffff);
        }
        &-confirm {
            @include font(24rpx, rgba(255, 255, 255, 0.7));
            text-decoration: line-through;
        }
        &-dedution {
            @include font(26rpx, #ffffff);
        }
    }
}
.modal-item {
    @include font(28rpx, #333333);
    .modal-item-title {
        @include font(30rpx, #333333);
        font-weight: bold;
    }
}
</style>
